"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import defaultAvatar from "../avatar.png";

export default function EditProfilePage() {
  const router = useRouter();

  const [formData, setFormData] = useState({
    name: "李阳",
    email: "liyang@oetsky.com",
    avatar: defaultAvatar,
  });

  const [language, setLanguage] = useState("简体中文");
  const [previewImage, setPreviewImage] = useState(null);

  // 模拟获取用户数据
  useEffect(() => {
    // 实际应用中应该从API获取数据
    // fetchUserData().then(data => {
    //   setFormData({
    //     name: data.name,
    //     email: data.email,
    //     avatar: data.avatar,
    //   });
    // });
  }, []);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleImageSelect = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        setPreviewImage(e.target.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleReset = () => {
    setPreviewImage(null);
  };

  const handleSave = () => {
    // 保存用户数据的逻辑
    console.log("保存的数据:", formData);
    router.push("/profile");
  };

  const handleCancel = () => {
    router.push("/profile");
  };

  const handleDeleteUser = () => {
    if (confirm("确定要删除用户吗？此操作不可撤销。")) {
      // 删除用户的逻辑
      console.log("删除用户");
      router.push("/");
    }
  };

  return (
    <div className='max-w-3xl mx-auto px-4 py-8'>
      <h1 className='text-2xl font-bold mb-6'>编辑资料</h1>

      <div className='bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8'>
        {/* 用户详细资料部分 */}
        <div className='mb-8'>
          <h2 className='text-xl font-semibold mb-4'>用户详细资料</h2>

          <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
            <div>
              <label className='block text-sm font-medium mb-2'>名称</label>
              <input
                type='text'
                name='name'
                value={formData.name}
                onChange={handleInputChange}
                className='w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent'
              />
            </div>

            <div>
              <label className='block text-sm font-medium mb-2'>
                Email地址
              </label>
              <input
                type='email'
                name='email'
                value={formData.email}
                onChange={handleInputChange}
                className='w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-100'
                readOnly
              />
            </div>
          </div>
        </div>

        {/* 用户头像部分 */}
        <div className='mb-8'>
          <h2 className='text-xl font-semibold mb-4'>用户头像</h2>
          <p className='text-sm text-gray-500 mb-4'>
            选择一张图，这张图片应该是256像素的正方形。
          </p>

          <div className='flex items-center space-x-6'>
            <div className='w-24 h-24 rounded-full overflow-hidden'>
              <Image
                src={previewImage || formData.avatar}
                alt='用户头像'
                width={96}
                height={96}
                className='object-cover w-full h-full'
              />
            </div>

            <div className='flex space-x-2'>
              <label className='px-4 py-2 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition-colors'>
                选择图片
                <input
                  type='file'
                  accept='image/*'
                  className='hidden'
                  onChange={handleImageSelect}
                />
              </label>

              {previewImage && (
                <button
                  onClick={handleReset}
                  className='px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors'
                >
                  重置
                </button>
              )}
            </div>
          </div>
        </div>

        {/* 语言部分 */}
        <div className='mb-8'>
          <h2 className='text-xl font-semibold mb-4'>语言</h2>
          <p className='text-sm text-gray-500 mb-4'>
            此选项将更改用于应用程序界面的语言，这不会影响用户创建的内容。
          </p>

          <select
            value={language}
            onChange={(e) => setLanguage(e.target.value)}
            className='w-full md:w-64 px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent'
          >
            <option value='简体中文'>简体中文</option>
            <option value='繁體中文'>繁體中文</option>
            <option value='English'>English</option>
            <option value='日本語'>日本語</option>
          </select>
        </div>

        {/* 底部操作按钮 */}
        <div className='flex justify-end space-x-3 pt-4 border-t'>
          <button
            onClick={handleCancel}
            className='px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100 transition-colors'
          >
            取消
          </button>

          <button
            onClick={handleDeleteUser}
            className='px-4 py-2 border border-red-500 rounded text-red-500 hover:bg-red-50 transition-colors'
          >
            删除用户
          </button>

          <button
            onClick={handleSave}
            className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors'
          >
            保存
          </button>
        </div>
      </div>
    </div>
  );
}
